<template>
  <div class="letter-setting__permission">
    <nav>
      <label>
        <input type="radio" name="permission" checked>
        <div>员工列表</div>
      </label>
      <label>
        <input type="radio" name="permission">
        <div>角色管理</div>
      </label>
    </nav>
    <div>
      <employees ></employees>
      <role v-if="false"></role>
    </div>
  </div>
</template>
<script setup>
import employees from './employees.vue';
import role from './role.vue';
</script>
<style lang="less" scoped>
.letter-setting__permission {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 118px auto;
  height: 100%;

  * {
    line-height: 1;
  }

  >nav {
    display: flex;
    padding: 30px;
    box-sizing: border-box;

    >label {
      margin-right: 18px;

      >input {
        display: block;
        width: 0;
        height: 0;
        opacity: 0;
      }

      >input+div {
        width: 158px;
        height: 60px;
        font-size: 24px;
        color: #666;
        background: #f8f8f8;
        box-shadow: 0 0 0 1px #e5e5e5;
        border-radius: 5px;
        text-align: center;
        line-height: 60px;
      }

      >input+div+div {
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        margin-top: 30px;
      }

      >input:checked+div {
        color: #fff;
        background: #1981f4;
        box-shadow: none;
      }
    }
  }
}
</style>